<template>
  <div class="contain">
    <!-- 异常标题 -->
    <div class="title">{{ msg }}</div>
    <!-- 异常信息的详情展示 -->
    <div class="list">
   <mt-loadmore 
    :top-method="loadTop" 
    :bottom-method="loadBottom" 
    :bottom-all-loaded="allLoaded"
    ref="mt"
    
     :auto-fill="false">
    <ul>
      <li v-for="(item) in tableData" :key="item.Id" class="temperature">
        <p>
          <span class="warning">异常时间：{{item.Time}}</span>
        </p>
        <p>
          <span>异常类型：</span>{{item.Detail}}</p>
        <p>
          <span>异常级别：</span>{{item.Rank}}</p>
        <p>
          <span>此刻伐值：</span>{{item.CurrenLevel}}</p>
        <p>
          <span>正常范围：</span>{{item.Range}}</p>
        <p>
          <span>处理建议：</span>{{item.ManageSuggest}}</p>
      </li>
    </ul>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
// 引入vue mapMutation辅助函数
import { mapMutations } from "vuex";
export default {
  name: "temperature",
  data() {
    return {
      msg: "温湿度异常",
      tableData: [],
       currentPage:1,
      pageSize:10,
      allLoaded:false
    };
  },
  created() {
    this.myAjax("top");
  },
  methods: {
    // 影射方法的调用为store,commit
    ...mapMutations(["clearMesNumber"]),
    myAjax(type) {
      var that = this;
      var url = api + "/api/Warehouse/GetTemps";
      switch (type) {
        case "top":
          that.currentPage = 1;
          break;
        case "bottom":
          that.currentPage += 1;
          break;
      }
      $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        /*  xhrFields: {
            withCredentials: true
         },
         crossDomain: true, */
        data: {
          p: that.currentPage,
          size: that.pageSize,
          token:JSON.parse(localStorage.getItem("token"))
        },
        success: function(result) {
          console.log("档案出入库：", result);
          if(result.state == -1){
            alert(result.message)
           that.$router.push("/login");
          }else{
                 // 请求成功展示列表
          switch (type) {
            case "top":
            // 隐藏上拉加载的内容
              that.$refs.mt.onTopLoaded();
              that.tableData = result;
              // 上拉刷新以后设置异常消息数量为0
              that.clearMesNumber("temperature");
              break;

            case "bottom":
             // 隐藏下拉刷新的内容
              that.$refs.mt.onBottomLoaded();
              if (result.length == 0) {
                 //  如果无数据，禁止下拉刷新
                this.allLoaded = true;
              } else {
                that.tableData.push(...result);
              }

              break;
          }
          }
         
        },
        error: function(error) {
          // 请求失败提示信息
          alert("系统异常");
        }
      });
    },
    loadTop(id) {
      console.log("this.pageSize:", this.currentPage);
      this.myAjax("top");
    },
    loadBottom() {
      this.myAjax("bottom");
    }
  },
  mounted() {
    //  页面加载更改当前异常信息数量为0
    this.clearMesNumber("temperature");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.temperature {
  width: 96%;
  border: 1px solid rgba(0, 0, 0, 0.125);
  margin: 5% 2%;
  border-radius: 5px;
  background: #fff;
  padding: 10px;
  p {
    border-bottom: 1px dashed #ccc;
  }
  &:hover {
    box-shadow: -2px 0 46px -5px #9e9c9e;
  }
  span {
    font-size: 18px;
    display: inline-block;
    text-align: left;
  }
}
</style>
